
import "./concernedProblem.less"
import { useState } from "react"
import { Dialog } from 'antd-mobile'
function ConcernedProblem() {
    document.title = "问题管理"
    const numFun = (num) => {
        if (typeof num !== 'number') {
            throw new Error('输入必须是一个数字');
        }
        if (num < 10000) {
            return num.toString(); // 数值小于1万时不显示“万”
        }
        const valueInTenThousand = num / 100;

        const formattedValue = parseInt(valueInTenThousand); // 显示两位小数
        const n = formattedValue / 100
        return `${n}万`;

    }

    const [data, setData] = useState(
        [
            {
                isShower: false,
                isshanchu: false
            },
            {
                isShower: false,
                isshanchu: true
            },
            {
                isShower: false,
                isshanchu: true
            },
            {
                isShower: false,
                isshanchu: true
            },
            {
                isShower: false,
                isshanchu: true
            },
            {
                isShower: false,
                isshanchu: true
            },
        ]
    )
    return (
        <div className="concernedProblem">
            {data.map((item, index) => (
                <div className="question-item" style={
                    !item.isshanchu ? { background: "#F2F2F2" } : {}
                } key={index}>
                    {
                     !item.isshanchu &&   <img  className="question-item-img" src={require('./../../../assets/wendaguanli/wdgl_shanchuneirong@2.png')} alt="" />
                    }
                    <div className="question-title">如何在保证装修质量前提下最大程度大大咧咧等等</div>
                    <div className="question-time">2023.02.12 10:22:21</div>
                    <div className="question-info">
                        <div className="question-info-left">
                            <div><span>{numFun(19999)}</span> 浏览</div>
                            <div className="question-info--left-center"><span>{numFun(19400)}</span>回答</div>
                            <div><span>{numFun(9999)}</span>关注</div>
                        </div>
                        <div className="question-info-right">
                            <img onClick={(e) => {
                                if (!item.isshanchu) return
                                if (!item.isShower){
                                    data.forEach(item => item.isShower = false) 
                                }  
                                let t = [...data]
                                t[index].isShower =  !item.isShower
                                setData(t)

                            }} src={require("../../../assets/wendaguanli/wdgl_gengduo@2.png")} alt="" />
                            {
                                item.isShower && <div className="question-info-right-img">
                                    <img onClick={() => {
                                         let t = [...data]
                                         t[index].isShower =  !item.isShower
                                         setData(t)
                                        Dialog.confirm({
                                            content: '是否提交申请',
                                            title: "提示",
                                            onConfirm: async () => {
                                               
                                                console.log("确定");
                                            },
                                        })

                                    }} src={require("../../../assets/wendaguanli/wdgl_qipao_sahnchu@2.png")} alt="" />
                                </div>
                            }
                        </div>
                    </div>
                </div>
            ))
            }
        </div>
    )
}
export default ConcernedProblem